<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - 中山大学软件工程学习共享平台</title>
    <link rel="stylesheet" th:href="@{/styles.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" th:href="@{/auth.css}">
</head>
<body>
<div class="auth-page">
    <div class="auth-container">
        <!-- 页面头部 -->
        <div class="auth-header">
            <h1>中山大学软件工程学习共享平台</h1>
            <p>欢迎注册，开始您的学习之旅</p>
        </div>

        <!-- 页面主体 -->
        <div class="auth-body">
            <!-- 错误信息显示 -->
            <div th:if="${error}" class="alert alert-danger">
                <span th:text="${error}"></span>
            </div>

            <!-- 成功信息显示 -->
            <div th:if="${success}" class="alert alert-success">
                <span th:text="${success}"></span>
            </div>

            <!-- 注册表单 - 使用传统表单提交 -->
            <form id="register-form" th:action="@{/register}" method="post">
                <!-- 角色选择 -->
                <div class="role-selection">
                    <div class="role-option selected" data-role="student">
                        <div class="role-icon">
                            <i class="fas fa-user-graduate"></i>
                        </div>
                        <div class="role-name">学生</div>
                        <div class="role-desc">课程学习与资源下载</div>
                    </div>
                    <div class="role-option" data-role="teacher">
                        <div class="role-icon">
                            <i class="fas fa-chalkboard-teacher"></i>
                        </div>
                        <div class="role-name">教师</div>
                        <div class="role-desc">课程管理与资源上传</div>
                    </div>
                </div>
                <input type="hidden" id="register-role" name="role" value="student">

                <div class="form-group">
                    <div class="input-with-icon">
                        <i class="fas fa-envelope"></i>
                        <input type="email" id="register-email" name="email" placeholder="请输入邮箱地址" required>
                    </div>
                    <div class="error-message" id="register-email-error"></div>
                </div>

                <div class="form-group">
                    <div class="input-with-icon">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="register-password" name="password" placeholder="请设置密码（6-20位字符）" required>
                    </div>
                    <div class="error-message" id="register-password-error"></div>
                </div>

                <div class="form-group">
                    <div class="input-with-icon">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="register-confirm-password" placeholder="请确认密码" required>
                    </div>
                    <div class="error-message" id="register-confirm-password-error"></div>
                </div>

                <button type="submit" class="auth-btn">注册并登录</button>

                <div class="auth-footer">
                    <p>已有账号？<a th:href="@{/login}" class="switch-to-login">立即登录</a></p>
                </div>
            </form>
        </div>
    </div>
</div>

<script th:src="@{/auth.js}"></script>
<script th:src="@{/register.js}"></script>
</body>
</html>